For 迴圈，在程式設計這個世界鼎鼎大名，多少人戰死在這裡，我就曾經在這裡跌倒，然後萬劫不復，請詳我之前的故事，這一切是怎麼開始的，我怎麼跑去學了Python。但是後來，時間果然是最好的推手，在我重新接觸 JavaScript 的時候，我竟然看懂了這一些，而且享受著，因為 for 迴圈的正確迭代，所產生的正確 output，每次看到有正確的產出，對我來說都是個非常舒壓與療癒的事情。

但是今天我們不是要來聊 JavaScript 的 for 迴圈，我們是要來介紹在 Sass 裡的@for功能，就像是程式語言中的 for 迴圈一樣，可以規律的迭代變數進去，快速產生樣式。

不免俗的，先示範一段程式碼，如果今天不啟用@for功能，今天要能生成這樣的效果，要寫多長的程式碼呢？我們先看一下codepen吧。

我分別安排了.box1~.box10，共10個方框，每一個寬高都是100px，並且用float並排，.box1~.box5的background，我用darken(red,5%)這個功能，然後10%、15%、20%及25%這樣累加上去，而.box6~.box10的background，我用改lighten(blue,4%)這個功能，然後8%、12%、16%及20%這樣累加上去，所以就變成了畫面這個樣子了，HTML 碼很單純，就是10個.box，我們直接來看 scss 碼吧。

.wrap{ 
  max-width:500px;
  margin: 0 auto;
}
.clearfix{
  clear: both;
}
.square{
  margin-top: 15px;
  .box1,.box2,
  .box3,.box4,
  .box5,.box6,
  .box7,.box8,
  .box9,.box10{
    width: 100px;
    height: 100px;
    float:left;
  }
  .box1{
    background:darken(red,5%);
  }
  .box2{
    background:darken(red,10%);
  }
  .box3{
    background:darken(red,15%);
  }
  .box4{
    background:darken(red,20%);
  }
  .box5{
    background:darken(red,25%);
  }
  .box6{
    background:lighten(blue,4%);
  }
  .box7{
    background:lighten(blue,8%);
  }
  .box8{
    background:lighten(blue,12%);
  }
  .box9{
    background:lighten(blue,16%);
  }
  .box10{
    background:lighten(blue,20%);
  } 
}

是不是非常的冗長呢？要先把.box1~.box10共同的條件全部寫在一起，然後後面再根據每一個不同的.box去修改他的background設定值，每一個都必須要手動調整，真的很麻煩。
但是若是改用@for的功能的話，那就會簡單多喔了喔，下面就是改寫成@for功能的scss碼，請看codepen吧。

我們來看一下改用@for功能的scss碼長怎樣吧。

.wrap{ 
  max-width:500px;
  margin: 0 auto;
}
.clearfix{
  clear: both;
}
.square{
  margin-top: 15px;
  @for $i from 1 through 10{
    .box#{$i}{
      width: 100px;
      height: 100px;
      float:left;
    }
  }
  @for $i from 1 through 5 {
    .box#{$i}{
      background:darken(red,$i*5%);
    }
  }
  @for $i from 6 through 10 {
    .box#{$i}{
      background:lighten(blue,($i)*4%-20%);
    }
  }
}

本來沒有用@for功能時，scss碼總共有49行，但是改用了@for功能讓他自行套用公式來迭代產生，程式碼大幅縮減至27行，是不是很神奇阿！

所以一個基本的@for功能是這樣撰寫的，如下：

@for $i from 1 to 5{}
@for $i from 1 through 5{}

先用@for啟用此功能，再來用$設立一個變數i(可自訂但通常慣用i)，再來from 1 to 5的意思是，$i這個變數，從1開始逐步替換到4(對的，只有到4，不包含5)，若要需要包含5，請用through，所以就會寫成@for $i from 1 through 5{}，這樣才$i才是從1逐步的替換到5，然後在@for最後面的大括弧內寫上要替換的對象(選擇器)以及條件(語法)，如下：

@for $i from 1 through 5{
  .box#{$i}{
    background:darken(red,$i*5%);
  }
}

假設這個簡單的案例是有五個.box，從.box1~.box5，然後分別用darken來加深他們的background顏色，首先先在.box後面緊接著#{$i}，讓他變成.box#{$i}，變數$i一定要先用{}包起來，然後在前面再加一個#字，這樣.box就會被逐步的迭代成.box1、.box2、.box3、.box4及.box5了，所以一個簡單的@for就可以一次給五個class效果呢，然後我們再來看後面的background，我們給他的值是利用darken功能，再來後面接條件(red,$i*5%)，寫成background:darken(red,$i*5%);，利用@for的迭代功能，就可以把background分別改成darken(red,$5%、10%、15%、20%、25%);，是不是果真很神奇呢這樣以後有規律的變化就可以用@for功能，撰寫scss就會更輕鬆了喔，我們下回見吧！